<style lang="sass" scoped>
    .swiper-slide{height:300px;background:#ccc;}

</style>

<template>
<div class="container-fluid">
      000000000000000000000000000000000000000000000000000000000000000000000000
    <nav-bar
        :name.sync="namexxx">
        <li slot="nav_two">123321</li>
    </nav-bar>
    <table-list>
        <!-- <div> -->
            <table slot="table-body" class="table table-bordered table_color">
                <thead>
                    <tr class="tr_success">
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                        <th class="min-w-200">w-200</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="n in 30">
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                        <th>{{n}}....</th>
                    </tr>
                </tbody>
            </table>
        <!-- </div> -->
    </table-list>
    <div>
        <button class="btn btn-primary" @click="search.isSearch=true">点击查询</button>
    </div>
    <div class="page_box tr clear mt20 mr20">
        <page :isSearch.sync="search.isSearch" :now-page="search.page" :page-size="search.pageSize" :total-count="search.totalcount"></page>
    </div>
    <hr>
        时间选择器组件封装
    <div>
        <select-time-common :begin.sync="begin" :end.sync="end" :datas="datas"></select-time-common>
        开始时间：<span v-text="begin"></span> &nbsp; &nbsp; &nbsp; 结束时间：<span v-text="end"></span>  
    </div>
    <hr>

    多个时间选择器<br>

    时间一
    <div>
        <select-time-common :begin.sync="moretime.begin1" :end.sync="moretime.end1" :datas="moretime.datas1"></select-time-common>
        时间二
        <select-time-common :begin.sync="moretime.begin2" :end.sync="moretime.end1" :datas="moretime.datas2"></select-time-common>
    </div>

    <button class="btn btn-default">123</button>
    <button class="btn btn-primary">123</button>
    <button class="btn btn-success">123</button>
    <button class="btn btn-danger">123</button>
    <button class="btn btn-danger2">123</button>
    <button class="btn btn-info">123</button>
    <button class="btn btn-warning">123</button>
    <button class="btn btn-warning2">123</button>
</div>
</template>

<script>
    import Vue from 'vue'
    import page from 'components/page'
    import selectTimeCommon from 'components/select_time_common'
    import tableList from 'components/tableList'
    import navBar from 'components/navBar'

    export default {
        components: {
           page,
           selectTimeCommon,
           tableList,
           navBar,
        },
        data(){
            return {
                search:{
                    page:1,
                    pageSize:10,
                    totalcount:100,
                    isSearch:false,
                },
                datas:{
                    istime:true,
                    beginId:'begin',
                    endId:'end'
                },

                begin:1477630954604,
                end:1477630954604,

                moretime:{
                    begin1:'',
                    end1:'',
                    datas1:{
                        beginId:'begin1',
                        endId:'end1'
                    },
                    begin2:'',
                    end2:'',
                    datas2:{
                        beginId:'begin2',
                        endId:'end2'
                    },
                },
                namexxx:'wing'
            }
        },
        mounted() {
            this.$nextTick(()=>{
                window['vue'] = this; 
            })
        },
        methods: {
            change:function(propName,newVal,oldVal){
                this.search[propName]=newVal;
                this.moretime[propName]=newVal;
                this[propName]=newVal;
                this.datas[propName]=newVal;
            }
        }
    }
</script>
<style lang="sass">

</style>

